<template>
  <div class="top" id="top" ref="top" :class="{isshow:height >= 300 ,click_search:click_search}">
    <div>
      <div class="left">
        <router-link to="/home" :style="{color:this.$route.name==='home'?'#409eff':''}">首页</router-link>
        <router-link to="/news" :style="{color:this.$route.name==='news'?'#409eff':''}">新闻</router-link>
        <div class="search_bar">
          <input @keydown.enter="shousearch" type="text" placeholder="搜索你想知道的内容" v-model="search_key">
          <img alt="" @click="shousearch" id="search" src="./image/search.svg">
          <img alt="" @click="shousearch" id="is_search" src="./image/show_search.svg">
        </div>
      </div>
      <div class="right">
        <img alt="" src="./image/light.svg" @click="setZhuTi" v-if="ZhuTi">
        <img alt="" src="./image/dark.svg" @click="setZhuTi" v-if="!ZhuTi">
        <img v-if="userinfo" class="cove" alt="" :src="'/api'+userinfo.avatar_url">
        <el-dropdown v-if="userinfo" trigger="click">
          <span class="el-dropdown-link">
                {{ userinfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <router-link to="/backend/userinfo">
              <el-dropdown-item>
                个人主页
              </el-dropdown-item>
            </router-link>
            <el-dropdown-item><a href="#">消息通知</a></el-dropdown-item>
            <router-link to="/backend/addarticle">
              <el-dropdown-item>
                发布文章
              </el-dropdown-item>
            </router-link>
            <router-link to="/backend/articleList">
              <el-dropdown-item>
                博客管理
              </el-dropdown-item>
            </router-link>
            <a href="http://127.0.0.1:8000/admin" v-if="userinfo.is_superuser"
               target="_blank">
              <el-dropdown-item>
                后台管理
              </el-dropdown-item>
            </a>
            <span @click="logout">
              <el-dropdown-item>
              注销登录
              </el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </el-dropdown>
        <template v-else>
          <router-link to="/account/login">登录</router-link>
          <router-link to="/account/register">注册</router-link>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import cookie from "js-cookie";

export default {
  name: "MyHead",
  props: ['height'],
  data() {
    return {
      search_key: '',      //搜索的内容
      click_search: false,
      index: this.$route.name, // 当前点击的页面名字
    }
  },
  methods: {
    ...mapMutations(['setZhuTi']),
    // 显示搜索输入框
    shousearch() {
      this.click_search = !this.click_search
      if (this.search_key) {
        this.$router.push({
          name: 'search',
          query: {
            key: this.search_key
          }
        })
        this.search_key = ''
      }
    },
    // 注销
    logout() {
      this.$store.dispatch('Account/logout', ['logout']).then(value => {
        if (value['code'] === 200) {
          cookie.remove('userinfo')
          this.$store.commit('cleadUserInfo')
        }
      })
    }
  },
  computed: {
    ...mapState(['userinfo','ZhuTi']),
  }
}
</script>

<style scoped lang="less">
.top {
  width: 100%;
  height: 55px;
  z-index: 1; /*设置图层优先级*/
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  transition: all 0.3s;

  > div {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /*上部分菜单栏左测位置*/

    .left {
      display: flex;
      align-items: center;

      a {
        margin-right: 10px;
        color: #ffffff;
      }

      > .search_bar {
        border-radius: 5px;

        img {
          height: 15px;
          width: 15px;
          margin-right: 10px;
        }

        > input {
          width: 0;
          height: 20px;
          border: none;
          display: none;
          background-color: transparent;
          margin: 0 10px;
          border-radius: 5px;
          padding: 11px 5px;
          border-left: 1px solid transparent;
        }

        #search {
          display: block;
        }

        #is_search {
          display: none;
        }
      }
    }


    /*上部分菜单栏右测位置*/

    .right {
      display: flex;
      align-items: center;

      .cove {
        border-radius: 50%;
        margin: 0 10px;
      }

      span {
        color: #ffffff;
      }

      img {
        position: relative;
        top: -1px;
        right: 10px;
        height: 20px;
        width: 20px;
      }

      a {
        color: #ffffff;
        margin-right: 5px;
      }
    }
  }
}

// 滚轮滑动后的样式
.isshow {
  background-color: white;
  box-shadow: 0 1px 3px #333333;

  > div {
    .left {

      a {
        color: black;
      }

      > .search_bar {

        #is_search {
          display: block;
        }

        #search {
          display: none;
        }

        > input {
          border: 1px solid #f0eeee;
          border-radius: 5px;
        }
      }
    }

    .right {
      span, a {
        color: black;
      }
    }
  }
}

// 点击搜索图标后的样式
.click_search {
  > div {
    .left {
      > .search_bar {
        display: flex;
        align-items: center;

        > input {
          width: 200px;
          height: 10px;
          display: block;
        }
      }
    }
  }
}
</style>